<template>
  <view class="travel-request">
	  <hy-cell label="用车事由：">
	  	  <textarea
	  	    name=""
	  	    id=""
	  	    auto-height
	  	    v-model="reason"
	  	    placeholder="请输入用车事由"
	  	    style="text-align: right;"
	  	  ></textarea>
	  </hy-cell>
	  <hy-cell label="用车目的地：">
	    <input
	      type="text"
	      v-model="destination"
	      placeholder="请输入用车目的地"
	      class="input-style"
	    />
	  </hy-cell>
	  <hy-cell label="用车人数：">
		<uni-number-box style="justify-content: flex-end;" :value="peopleNum" @change="peopleNumChange"></uni-number-box>
	  </hy-cell>
	  <view  @click="DatePicker('startTime')">
		  <hy-cell label="开始时间：">
		  	<input
		  	  type="text"
		  	  :value="startTime"
		  	  disabled="true"
		  	  placeholder="请选择开始时间"
		  	  class="input-style"
		  	/>
		  </hy-cell>
	  </view>
	  <view  @click="DatePicker('overTime')">
	  		  <hy-cell label="结束时间：">
	  		  	<input
	  		  	  type="text"
	  		  	  :value="overTime"
	  		  	  disabled="true"
	  		  	  placeholder="请选择结束时间"
	  		  	  class="input-style"
	  		  	/>
	  		  </hy-cell>
	  </view>
	  <picker mode="selector" range-key="label" :range="carUsing" @change="chooseUsing">
	  <hy-cell label="车量用途：">
	  	<input
	  	  type="text"
	  	  :value="purpose.label"
	  	  disabled="true"
	  	  placeholder="请选择车量用途"
	  	  class="input-style"
	  	/>
	  </hy-cell>
	    </picker>
		<hy-cell label="是否市内：">
			<switch checked="true" @change="isOutChange"/>
		</hy-cell>
		<hy-cell label="输入选择审批人：">
			<zxz-uni-data-select v-model="userIds" filterable multiple dataKey="nickName" dataValue="userId"
				:localdata="carPeopleList" @change="change"></zxz-uni-data-select>
		  <!-- <cuihai-combox @input="valueChange('nickName')" placeholder="请输入并选择审批人" style="text-align: right;" @getValue="getValue" :candidates="carPeopleList" isJSON keyName="nickName"></cuihai-combox> -->
		</hy-cell>
    <view class="page-footer">
      <button type="normal" @click="handleSave()">提交申请</button>
    </view>
	<mx-date-picker :show="showPicker" format="yyyy-mm-dd hh:ii:ss" type="datetime" :value="value" :show-tips="true" :begin-text="'入住'" :end-text="'离店'" :show-seconds="true" @confirm="ed" @cancel="ed" />
  </view>
</template>

<script>
import HyCell from "@/components/hy-cell";
import MxDatePicker from "@/components/mx-datepicker/mx-datepicker.vue";
import multipleSelect from "@/components/multiple-select";
import pickRegions from "@/components/pick-regions/pick-regions.vue";
import config from '@/config/config';
export default {
  name: "travel-request",
  components: {
    "hy-cell": HyCell,
    "multiple-select": multipleSelect,
    "pick-regions": pickRegions,
	MxDatePicker
  },
  data() {
    return {
		userIds:[],
		nickName:'',
		userId:'',
		carPeopleList:[
			// {nickName:'张三',userId:1},
			// {nickName:'李四',userId:2},
			// {nickName:'王五',userId:3},
			// {nickName:'老六',userId:4},
		],
		isOut:true,
		purpose:{
			value:'',
			label:''
		},
		value:'',
		reason:'',
		destination:'',
		peopleNum:1,
		startTime:'',
		overTime:'',
		showPicker:false,
		carUsing:[
			{value:1,label:'公司办公用车'},
			{value:2,label:'物流办公用车'},
			{value:3,label:'外出用车'},
			{value:4,label:'临时用车'},
			{value:0,label:'其他'},
		],
		isOutList:[
			{value:0,label:'是'},
			{value:1,label:'否'}
		]
    };
  },
  onShow() {
	this.getUserList()
	config.verifyToken()
  },
  methods: {
	  change(e){
		console.log(e,this.userIds)
	  },
	  valueChange(type){
		this.nickName = ''
		this.userId = ''
	  },
	  getValue(e){
		  console.log(e)
		let carPeople = this.carPeopleList[e]
		this.nickName = carPeople.nickName
		this.userId = carPeople.userId
	  },
	  // 获取审批人
	  getUserList(){
		this.$http
		  .get("/system/user/allList")
		  .then((res) => {
			console.log(res,'审批人列表')		    
			uni.hideLoading();
			this.carPeopleList = res.rows
		  })
		  .catch((errorData) => {
		    uni.hideLoading();
		    console.log(errorData);
		  });
	},
	  isOutChange(e){
		  this.isOut = e.detail.value
		console.log(this.isOut,e)  
	  },
	  peopleNumChange(e){
		this.peopleNum = e
	  },
	  DatePicker(type){//显示
		  this.type = type;
		  this.showPicker = true;
		  this.value = this[type];
	  },
	  ed(e) {//选择
		  this.showPicker = false;
		  if(e) {
			  this[this.type] = e.value; 
			  //选择的值
			  console.log('value => '+ e.value);
			  //原始的Date对象
			  console.log('date => ' + e.date);
		  }
	  },
	// 选择审批部门
	chooseUsing(e){
		this.purpose = this.carUsing[e.detail.value]
	},
    showToast(txt, icon = "none") {
      uni.showToast({
        title: txt,
        duration: 1000,
        icon: icon,
      });
    },
    // 获取选择的出差人员
    confirm(data) {
      this.personnel = data.map((el) => el.label).join(",");
      this.personnelids = data.map((el) => el.value).join(",");
    },
    // 保存
    handleSave() {
      let valid = this.validate();

      if (valid) this.save();
    },
    // 必填项校验
    validate() {
      if (!this.reason) {
        this.showToast("请填写用车事由");
        return false;
      } else if (!this.destination) {
        this.showToast("请填写用车目的地");
        return false;
      } else if (!this.peopleNum) {
        this.showToast("请填写用车人数");
        return false;
      } else if (!this.startTime) {
        this.showToast("请选择开始时间");
        return false;
      } else if (!this.overTime) {
        this.showToast("请选择结束时间");
        return false;
      } else if (!this.purpose.label) {
        this.showToast("请选择车辆用途");
        return false;
      }else if (!this.userIds.length) {
        this.showToast("请选择审批人");
        return false;
      }
	  if((new Date(this.overTime.replace(/\-/g,'/')).getTime()-new Date(this.startTime.replace(/\-/g,'/')).getTime())/1000/60/60/24>2){
		  this.showToast("时间跨度不能超过48小时");
		  return false;
	  }
      return true;
    },
    // 提交申请
    save() {
      uni.showModal({
        title: "提示",
        content: "是否确认提交申请？",
        success: (res) => {
          if (res.confirm) {
            uni.showLoading({
              title: "加载中",
            });
            let params = {
              reason:this.reason,
			  destination:this.destination,
			  peopleNum:this.peopleNum,
			  startTime:this.startTime,
			  overTime:this.overTime,
			  purpose:this.purpose.value,
			  typeStatus:this.isOut?0:1,
			  userList:this.userIds
            };
			console.log(params)
            this.$http
              .post("/system/car", params)
              .then(() => {
                uni.hideLoading();
                uni.showToast({
                  title: "提交成功",
                });
                setTimeout(() => {
					uni.setStorageSync('shenhe','1')
                  uni.navigateBack();
                }, 1000);
              })
              .catch((errorData) => {
                uni.hideLoading();
                console.log(errorData);
              });
          }
        },
      });
    }
  },
};
</script>

<style lang="scss">
.travel-request {
  background: #fff;
  textarea {
    width: 100%;
    font-size: 28upx;
  }
  .input-style {
    text-align: right;
    font-size: 28upx;
  }
}
</style>
